<template>
  <div class="time">
    <a-input readonly @click.stop="onShow"  v-model:value="time"  placeholder="选择时间" />
    <div class="time-picker" v-if="visible" @click.stop>
      <ul class="time-picker-column">
        <li @click="change(0, v-1)" v-for="v in 25" :key="v" :class="{ active: +h === v -1 }">
          {{ v > 10? v - 1: `0${v-1}` }}
        </li>
      </ul>
      <ul class="time-picker-column">
        <li @click="change(1, v-1)" v-for="v in 60" :key="v" :class="{ active: +m === v - 1 }">
          {{ v > 10? v -1: `0${v-1}` }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  name: "TimeDate",
  emit: ["modify"],
  props: ['value'],
  data() {

    return {
      visible: false,
    };
  },

  computed: {
    time() {
      const { h, m } = this;
      return  `${h > 9 ? h:'0' + h}:${m > 9? m: '0' + m}`;
    },
    h() {
      return this.value ? this.value[0] : 0;
    },
    m() {
      return this.value ?this.value[1] : 0;
    }
  },
  methods: {
    change(key , v) {
      const arr =  [this.h, this.m];
      arr[key] = v;
      this.$emit('modify', arr);
    },
    onShow() {
      this.visible = true;
      console.log('显示了')
      const deleteFn = ()=> {
        this.visible = false;
        document.removeEventListener('click', deleteFn);
      }
      this.$nextTick(() => {
        document.addEventListener('click',deleteFn )
      });
    },
  },
};
</script>

<style scoped>
.time {
  position: relative;
  width: 143px;
}
.time-picker {
  position: absolute;
  z-index: 10000;
  top: 34px;
  left: 0;
  height: 224px;
  display: flex;

  border: 1px solid #f0f0f0;
  background: white;
}

.time-picker-column {
  display: flex;
  flex-direction: column;
  height: 224px;

  flex: 1 0 auto;
  width: 56px;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  text-align: left;
  list-style: none;
  transition: background .3s;
}

.time-picker-column:last-of-type {
  border-left: 1px solid #f0f0f0;
}

.time-picker-column:hover {
  overflow-y: scroll;
}
.time-picker-column li {
  cursor: pointer;
  height: 28px;
  line-height: 28px;
  padding: 0 0 0 14px;
}

.time-picker-column li:hover {
  background: #f5f5f5;
}

.time-picker-column li.active {
  background: #e6f7ff;
}

</style>
